<template>
  <div class="my-appointments-container">
    <div class="page-header">
      <h2>我的预约</h2>
    </div>

    <div class="filter-bar">
      <el-select v-model="filterStatus" placeholder="预约状态" clearable @change="handleFilterChange">
        <el-option 
          v-for="item in statusOptions" 
          :key="item.value" 
          :label="item.label" 
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <el-table
      v-loading="loading"
      :data="appointments"
      style="width: 100%"
      border
      stripe
      empty-text="暂无预约记录">
      <el-table-column label="服务名称" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.serviceName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宠物名称" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.petName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约时间" min-width="150">
        <template slot-scope="scope">
          <span>{{ formatDateTime(scope.row.appointmentTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.remark || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button 
            v-if="scope.row.status === 'PENDING' || scope.row.status === 'CONFIRMED'"
            type="danger" 
            size="mini" 
            @click="handleCancel(scope.row)">
            取消预约
          </el-button>
          <el-button
            v-if="scope.row.status === 'COMPLETED'"
            type="primary"
            size="mini"
            @click="handleViewDetail(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 取消预约确认框 -->
    <el-dialog
      title="取消预约"
      :visible.sync="cancelDialogVisible"
      width="400px">
      <p>确定要取消此预约吗？</p>
      <p class="warning-text">取消后不可恢复，请谨慎操作。</p>
      <div slot="footer">
        <el-button @click="cancelDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmCancel" :loading="cancelLoading">确定取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAppointmentList, cancelAppointment } from '@/api/service'
import { formatDateTime } from '@/utils/date'

export default {
  name: 'MyAppointments',
  data() {
    return {
      loading: false,
      appointments: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      filterStatus: '',
      statusOptions: [
        { label: '待确认', value: 'PENDING' },
        { label: '已确认', value: 'CONFIRMED' },
        { label: '已完成', value: 'COMPLETED' },
        { label: '已取消', value: 'CANCELLED' }
      ],
      cancelDialogVisible: false,
      cancelLoading: false,
      currentAppointment: null
    }
  },
  created() {
    this.fetchAppointments()
  },
  methods: {
    formatDateTime,
    async fetchAppointments() {
      try {
        this.loading = true
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          status: this.filterStatus
        }
        
        const response = await getAppointmentList(params)
        
        if (response.code === 200) {
          this.appointments = response.data.list || []
          this.total = response.data.total || 0
        } else {
          this.$message.error(response.message || '获取预约列表失败')
        }
      } catch (error) {
        console.error('获取预约列表失败:', error)
        this.$message.error('获取预约列表失败')
      } finally {
        this.loading = false
      }
    },
    
    handleFilterChange() {
      this.currentPage = 1
      this.fetchAppointments()
    },
    
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchAppointments()
    },
    
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchAppointments()
    },
    
    getStatusText(status) {
      const statusMap = {
        'PENDING': '待确认',
        'CONFIRMED': '已确认',
        'COMPLETED': '已完成',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },
    
    getStatusType(status) {
      const typeMap = {
        'PENDING': 'warning',
        'CONFIRMED': 'primary',
        'COMPLETED': 'success',
        'CANCELLED': 'info'
      }
      return typeMap[status] || ''
    },
    
    handleCancel(appointment) {
      this.currentAppointment = appointment
      this.cancelDialogVisible = true
    },
    
    async confirmCancel() {
      if (!this.currentAppointment) return
      
      try {
        this.cancelLoading = true
        const response = await cancelAppointment(this.currentAppointment.id)
        
        if (response.code === 200) {
          this.$message.success('取消预约成功')
          this.cancelDialogVisible = false
          this.fetchAppointments()
        } else {
          this.$message.error(response.message || '取消预约失败')
        }
      } catch (error) {
        console.error('取消预约失败:', error)
        this.$message.error('取消预约失败，请稍后再试')
      } finally {
        this.cancelLoading = false
      }
    },
    
    handleViewDetail(appointment) {
      this.$router.push(`/main/appointments/${appointment.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-appointments-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 20px;
    
    h2 {
      font-size: 22px;
      color: #333;
      margin: 0;
    }
  }
  
  .filter-bar {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
  
  .warning-text {
    color: #E6A23C;
    font-size: 14px;
  }
}
</style> 